<template>
  <v-content >
    <div class="mw-column-style" style="background-color: #ffffff;margin-bottom:0.79rem;" v-vuet-scroll="{ path: 'addresslist', name: 'content' }">
      <div class="hd" v-bind:style="{ 'background-image': `url(${topicInfo.cover_url})` }">
        <div class="mw-flex flex-vc m-t-50">
          <div class="flex1">{{topicInfo.title}}</div>
          <div><button class="btn_base" @click="topicFocus(topicInfo.id)">收藏</button></div>
        </div>
        <div class="m-t-10">
          <span>回答：{{topicInfo.note_number}}</span>
          <span class="m-l-15">关注：{{topicInfo.follow_users_number}}</span>
        </div>
      </div>
      <div class="topic_desc">
        {{topicInfo.description}}
      </div>
      <div class="hot_user p-t-16 p-b-20">
        <div class="p-l-16 p-r-16 mw-flex">
          <span class="flex1">热门用户</span>
          <span>+</span>
        </div>
        <div class="user_list">
          <div class="user_item" :class="{active:curIndex == index }" v-for="(item,index) in hotUsers" :key="index">
            <div class="user_avatar">
              <img :src="item.avatar" width="100%" alt="">
              <span class="tag_focus" v-if="!item.followed" @click="userFocus(item.id)">+</span>
            </div>
            <div class="ellipsis fz-12 m-t-8">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </v-content>
</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      // mapModules({data: 'addresslist'}),
      // mapRules({store: [{ path: 'addresslist' }],need: [{ path: 'addresslist' }]}),
    ],
    components: {

    },
    data() {
      return {
        topicId:'',
        curIndex:0,
        hotUsers:[],
        topicList:[],
        topicInfo:{},
      }
    },
    methods: {
      getTopicInfo(){
        var that = this;
        httputil.request("topic/detail", {id:that.topicId}, function (successresult) {
          that.topicInfo = successresult.topic_detail;
        }, function (errorresult) {
          if (type == "down") {
            done();
          }
        }, "GET", false, "")
      }, 
      getHotUsers(){
        var that = this;
        httputil.request("topic/users", {id:that.topicId}, function (successresult) {
          that.hotUsers = successresult.user_list.users;
        }, function (errorresult) {
          if (type == "down") {
            done();
          }
        }, "GET", false, "")
      },
      topicFocus(id){
        var that = this;
        httputil.request("topic/followed", {topic_id:id}, function (successresult) {
          console.log(successresult)
          // that.hotUsers = successresult.user_list.users;
        }, function (errorresult) {
          if (type == "down") {
            done();
          }
        }, "POST", false, "")
      },
      userFocus(id){
        
      }
    },

    created() {
      let query = this.$route.query
      this.topicId = query.id
    },

    mounted() {
      this.getHotUsers();
      this.getTopicInfo();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import "../../assets/styles/base.less";
.zxlybtn2 {
  color: green;
}
.hd{
  color: #fff;
  width: 100%;
  height: 1.5rem;
  padding: .2rem .15rem;
  background-color: #ffd012;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}
.topic_desc{
  line-height: 1.2;
  padding: .15rem .14rem;
  .border(-bottom);
}
.btn_base {
  outline: none;
  border: 0;
  color: #333;
  width: 0.58rem;
  text-align: center;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: @mw-color;
  border-radius: .06rem;
}
.btn_info {
  /* flex: 1 0 25%; */
  outline: 0;
  color: #333;
  width: 0.66rem;
  text-align: center;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #f2f2f2;
  border: 0;
  border-radius: 0.3rem;
}
.btn_info.active {
  background-color: #ffd012;
}
.user_list{
  display: flex;
  padding: .1rem 0 .08rem .16rem;
  .user_item{
    position: relative;
    width: .5rem;
    margin-right: .34rem;
    .user_avatar{
      width: .5rem;
      height: .5rem;
      border-radius: .5rem;
      overflow: hidden;
    }
    .tag_focus{
      position: absolute;
      top: .3rem;
      right: -0.06rem;
      width: .22rem;
      text-align: center;
      height: .2rem;
      line-height: .2rem;
      background-color: @mw-color;
      border-radius: .2rem;
      border: 2px solid #fff;
    }
  }
}
</style>
